<template>
  <div class="HotSongList">
    <div class="h3-title">
      <div class="left">
        <span class="font-icon"></span>
        <b class="title" @click="screenSongList('全部风格')">热门推荐</b>
        <span class="text" @click="screenSongList('华语')">华语</span>
        <i></i>
        <span class="text" @click="screenSongList('流行')">流行</span>
        <i></i>
        <span class="text" @click="screenSongList('摇滚')">摇滚</span>
        <i></i>
        <span class="text" @click="screenSongList('民谣')">民谣</span>
        <i></i>
        <span class="text" @click="screenSongList('电子')">电子</span>
      </div>
      <div class="right">
        <span class="more-text" @click="screenSongList('全部风格')">更多</span>
        <span class="iconfont">&#xe6d7;</span>
      </div>
    </div>
    <div class="content">
      <div class="music-list">
        <div class="list" v-for="item in playlists" :key="item.id">
          <div class="music">
            <div class="img">
              <img @click="albumInfo(item)" :src="item.coverImgUrl" alt="" />
            </div>
            <div class="control">
              <div class="left">
                <i class="iconfont font-12">&#xe600;</i>
                &nbsp;&nbsp;<span class="font-12">{{ item.playCount }}</span>
              </div>
              <div class="right">
                <i @click="albumPlay(item)" class="iconfont iconfont-cursor"
                  >&#xe638;</i
                >
              </div>
            </div>
          </div>
          <div class="music-info" :title="item.name" @click="albumInfo(item)">
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { topPlaylist } from "@/api";
export default {
  name: "HotSongList",
  data() {
    return {
      playlists: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    ...mapActions("music", ["ALBUM_MUSIC_LIST_FORMAT", "SET_CHANGE_MUSIC_URL"]),
    init() {
      this.getTopPlaylist();
    },
    getTopPlaylist() {
      topPlaylist({ order: "hot", limit: 8 }).then((data) => {
        this.playlists = data.playlists;
      });
    },
    albumInfo(val) {
      this.$router.push({
        name: "albumDetails",
        query: {
          id: val.id,
        },
      });
    },
    async albumPlay(val) {
      let { config, musicFlag } = await this.ALBUM_MUSIC_LIST_FORMAT(val);
      if (musicFlag) {
        config.map(async (item) => {
          await this.SET_CHANGE_MUSIC_URL(item);
        });
        this.$Notification("添加成功!", "success");
      } else {
        this.$Notification("此歌曲暂无版权。");
      }
    },
    screenSongList(val) {
      this.$router.push({
        name: "findMusicSongList",
        query: {
          msg: val,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.HotSongList {
  padding: 20px;
  overflow: hidden;
  .content {
    .music-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .list {
        margin: 0 4px;
        margin-top: 20px;
        // margin-right:21px;
        // margin-left:21px;
        display: inline-block;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .music {
          position: relative;
          width: 140px;
          height: 140px;
          .img {
            width: 100%;
            height: 100%;
            img {
              width: 100%;
              height: 100%;
              cursor: pointer;
            }
          }
          .control {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 12px;
            color: rgb(202, 202, 202);
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 27px;
            background-image: url(../../assets/img/homepage-control.png);
            background-position: 0 -537px;
            .font-12 {
              font-size: 12px;
            }
            .iconfont {
              cursor: context-menu;
            }
            .iconfont-cursor {
              cursor: pointer;
            }
            .iconfont-cursor:hover {
              color: #fff;
            }
          }
        }
        .music-info {
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          font-size: 14px;
          color: #000;
          width: 140px;
          &:hover {
            text-decoration: underline;
            cursor: pointer;
          }
        }
      }
    }
  }
  .h3-title {
    display: flex;
    padding-bottom: 4px;
    justify-content: space-between;
    border-bottom: 2px solid rgb(193, 13, 12);
    .right {
      .more-text {
        font-size: 12px;
        color: #666;
        cursor: pointer;
        &:hover {
          text-decoration: underline;
        }
      }
      .iconfont {
        margin: 0 6px;
        color: rgb(193, 13, 12);
        font-size: 12px;
      }
    }
    .left {
      display: flex;
      align-items: center;
      i {
        margin: 0 13px;
        height: 11px;
        border-right: 2px solid #ccc;
      }
      .text {
        font-size: 12px;
        color: #666;
        cursor: pointer;
        &:hover {
          text-decoration: underline;
        }
      }
      .title {
        cursor: pointer;
        margin-right: 20px;
        font-size: 20px;
        font-weight: normal;
        line-height: 28px;
      }
      .font-icon {
        margin: 0 10px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background-color: rgb(193, 13, 12);
        position: relative;
        &::after {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          background-color: #fff;
          width: 5px;
          height: 5px;
          border-radius: 50%;
          transform: translate(-0px, -0.5px);
        }
      }
    }
  }
}
</style>